<!--
* @description 
* @author zywu
* @date 2022/09/22 15:14:51
!-->
<template>
  <div class="video-player">
    <van-nav-bar :title="title" left-text right-text="按钮" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <template #right>
        <van-icon v-if="isConcern" name="like" size="20" color="red" />
        <van-icon v-else name="like-o" size="20" color="#333" />
      </template>
    </van-nav-bar>
    <div ref="playerWrap" class="video-player__wrap e-relative">
      <div class="overlay e-flex-xy-center" @click="clickOverlay">
        <div v-show="!playing" class="btn-pause e-flex-xy-center" @click.stop="handlePlay">
          <van-icon :name="playing?'pause':'play'" size="24" color="#fff" />
        </div>
      </div>
      <div class="video-player__tool e-flex-y-center e-flex-between">
        <van-icon
          class="e-ml-20 iconfont"
          :name="sound?'24gl-volumeMiddle':'24gl-volumeCross'"
          class-prefix="icon"
          size="20"
          color="#fff"
          @click="toggleSound"
        />
        <van-icon class="e-mr-20" :name="isFullscreen?'shrink':'expand-o'" size="20" color="#fff" @click="handleScreen" />
      </div>
      <div id="playerBox" class="video-player__box"></div>
    </div>
    <div class="e-flex-y-center e-flex-around e-mt-30 e-pt-20">
      <div class="round-button e-flex-xy-center" @click="talk">
        <van-icon class="iconfont" name="yuyin1" class-prefix="icon" size="24" color="#333" />
      </div>
      <div class="round-button e-flex-xy-center" @click="videotape">
        <van-icon class="iconfont" name="vcr-full" class-prefix="icon" size="20" color="#333" />
      </div>
      <div class="round-button e-flex-xy-center" @click="screenshot">
        <van-icon class="iconfont" name="jieping" class-prefix="icon" size="24" color="#333" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { loadPlayer } from '@/utils/loadPlayer'
import { getRTSPUrl } from '@/api/video'
import { addUserConcem } from '@/api/common'
let myPlugin
export default {
  components: {},

  data() {
    return {
      title: '',
      showBtn: false,
      sound: false,
      playing: false,
      isConcern: false,
      isFullscreen: false,
    }
  },

  computed: {
    ...mapState(['userInfo']),
  },

  created() {
    this.title = decodeURIComponent(this.$route.query.name)
    this.id = this.$route.query.id
    this.deviceId = this.$route.query.deviceId
    this.isConcern = this.$route.query.isConcern == 1
  },

  mounted() {
    this.url = 'ws://10.2.145.66:655/EUrl/CLJ52BW'
    this.init()
  },

  methods: {
    getRTSPUrl() {
      getRTSPUrl({
        deviceId: this.deviceId,
      }).then((res) => {
        this.init(res.data)
      })
    },
    init(url) {
      loadPlayer().then(() => {
        myPlugin = new JSPlugin({
          szId: 'playerBox', //需要英文字母开头 必填
          szBasePath: './dist', // 必填,引用H5player.min.js的js相对路径
          oStyle: {
            border: '#000',
            borderSelect: '#000',
            background: '#000',
          },
        })
        this.play()
      })
    },
    play() {
      myPlugin
        .JS_Play(
          this.url,
          {
            mode: 0, // 解码类型：0=普通模式; 1=高级模式 默认为0
          },
          0 //当前窗口下标
        )
        .then(
          () => {
            console.info('JS_Play success')
          },
          (err) => {
            console.info('JS_Play failed:', err)
          }
        )
    },
    stop() {
      myPlugin.JS_Stop(0).then(
        () => {
          this.playing = false
        },
        (err) => {
          this.$toast('暂停失败')
        }
      )
    },
    handlePlay() {
      if (this.playing) {
        this.stop
      } else {
        this.play()
      }
    },
    toggleSound() {
      myPlugin[this.sound ? 'JS_CloseSound' : 'JS_OpenSound'](0).then(
        () => {
          this.sound = !this.sound
        },
        (err) => {}
      )
    },
    talk() {
      this.$toast('暂不支持对讲功能')
    },
    videotape() {
      this.$toast('暂不支持录像功能')
    },
    screenshot() {
      let fileName = `app_${new Date().getTime()}`
      let fileType = 'JPEG'
      //下载到本地
      myPlugin.JS_CapturePicture(0, fileName, fileType).then(
        () => {
          this.$toast('截图成功')
        },
        (err) => {}
      )
    },
    clickOverlay() {
      if (this.playing) {
        this.stop()
      }
    },
    handleScreen() {
      if (this.isFullscreen) {
        this.exitFullscreen()
      } else {
        this.fullScreen(this.$refs.playerWrap)
      }
      this.isFullscreen = !this.isFullscreen
    },
    fullScreen(ele) {
      const func =
        ele.requestFullscreen ||
        ele.mozRequestFullScreen ||
        ele.webkitRequestFullscreen ||
        ele.msRequestFullscreen
      func.call(ele)
    },
    exitFullscreen() {
      const func =
        document.exitFullScreen ||
        document.mozCancelFullScreen ||
        document.webkitExitFullscreen ||
        document.msExitFullscreen
      func.call(document)
    },
    onClickRight() {
      addUserConcem({
        concemId: this.id,
        type: 2,
        userAccount: this.userInfo.accountName,
      }).then(({ status }) => {
        if (status == 200) {
          if (this.isConcern) {
            this.$toast('取消关注成功')
          } else {
            this.$toast('关注成功')
          }
          this.isConcern = !this.isConcern
        }
      })
    },
    onClickLeft() {
      window.top.app.methods.backToTab()
    },
  },
}
</script>
<style lang='scss'>
.video-player {
  &__box {
    width: 100%;
    height: 250px;
    background: #000;
  }
  &__tool {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 2;
  }
  .round-button {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    border: 0.5px solid #666;
    box-sizing: border-box;
  }
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }
  .btn-pause {
    width: 48px;
    height: 48px;
    border-radius: 24px;
    border: 1px solid #666;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.1);
  }
}
</style>